<template>
  <div>
      <Nav></Nav>
      <div class="header-top"></div>
      <!-- header area  start-->
      <div id="loading-wrap" v-loading="loading">
        <div class="header-area">
            <div class="header-center">
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane v-for="(item , index) in information" :key="index" :label="item.name" :name="item.step" :disabled="item.flag">
                            <div class="head-main">
                                <div class="head-img">
                                    <img :src="item.img_url" alt="">
                                </div>
                                <div class="head-txt">
                                  <p class="head-title">{{item.alias}}</p>
                                  <p class="head-peo">讲师：{{item.teacher}}</p>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
        <!-- header area end-->
        <!-- header pro  start-->
        <div class="head-pro" v-loading="loading">
          <div class="head-list">
            <p class="lis-tit">目录</p>
            <ul class="lis-ul">
                <li class="lis-li" v-for="(ite , index) in catalog" :key="index">
                    <div class="J-media-item" @click="skipHref(ite.id,ite.url)">
                      <i v-if="ite.status==0" class="el-ali-yuanquan start"></i>
                      <i v-else-if="ite.status==1" class="el-ali-chart12 ing"></i>
                      <i v-else="ite.status==2" class="el-ali-xuanzhong end"></i>
                      <i class="el-ali-shipin type"></i>{{ite.name}} ({{ite.play_time}})</div>
                    <!--<router-link tag='a' :to="{path:'/video',name:'video',query:{id:ite.id,url:ite.url}}" class="J-media-item"><i v-if="ite.status==0" class="el-ali-yuanquan start"></i><i v-else="ite.status==1" class="el-ali-chart12 ing"></i><i v-else="ite.status==2" class="el-ali-xuanzhong end"></i><i class="el-ali-shipin type"></i>{{ite.name}} ({{ite.play_time}})</router-link>-->
                </li>
                <li class="lis-lis" v-show="xianYin">此系统还没有教学视频，正在加紧录制中...</li>
            </ul>
          </div>
          <div class="head-ideas">
              <p class="lis-tit">课程建议</p>
              <div class="lis-box">
                  <el-input border="0" class="lis-textarea" type="textarea" :autosize="{ minRows: 6, maxRows: 400}" placeholder="您对此教学的看法和观点，都可以填写子啊此文本框内，感谢您的建议。" v-model="suggest"></el-input>
                  <el-button class="tiJiao" size="small" type="primary" @click="referInfo">提交</el-button>
              </div>
          </div>
        </div>
        <!-- header pro end-->
      </div>
  </div>
</template>

<script>
  import Nav from '../component/nav.vue'
  export default {
      components:{
          Nav
      },
      data() {
          return {
            information:[], //系统分类
            catalog:[], //目录
            activeName: 'first',
            xianYin:false, //显示隐藏
            suggest:'', //视频建议
            loading: true
          }
      },
      mounted(){
        this.menu();
        this.getInfo();
      },
      methods: {
          /*获取信息*/
          getInfo(){
            let self = this;
            this.$axios({
                  url: this.$url.videoInfo,
                  method:'post',
              }).then(response=>{
                  //console.log(response.data)
                  if(response.data.result){
                      //this.information=response.data.content;
                      /*tab切换数据*/
                      var opt = [];
                      for(var value of response.data.content){
                        opt.push({
                          'alias':value.alias,
                          'flag': this.getFlag(value.flag),
                          'img_url':value.img_url,
                          'id':value.id,
                          'name':value.name,
                          'step':value.step,
                          'teacher':value.teacher
                        })
                      }
                      this.information = opt;
                      /*视频列表数据*/
                      if(response.data.content[0].video.length>0){
                          this.xianYin=false;
                          var option = [];
                          for(var value of response.data.content[0].video){
                              option.push({
                                  'index':value.index,
                                  'name':value.name,
                                  'url':value.url,
                                  'id':value.id,
                                  'status':value.status,
                                  'play_time':value.play_time
                              })
                          }
                          this.catalog = option;
                      }else{
                          this.catalog=[];
                          this.xianYin=true;
                      }
                      this.loading=false;
                  }
              }).catch(error=>{
                console.log(error);
              })
          },
          /*点击tab*/
          handleClick(tab, event) {
            //console.log(tab, event);
            this.loading=true;
            var cc=tab.index;
            this.$axios({
                url: this.$url.videoInfo,
                method:'post',
            }).then(response=> {
                if (response.data.result) {
                    if (response.data.content[cc].video.length > 0) {
                        this.xianYin=false;
                        this.catalog = [];
                        var option = [];
                        for (var value of response.data.content[cc].video) {
                            option.push({
                                'index': value.index,
                                'name': value.name,
                                'url': value.url,
                                'id': value.id,
                                'status': value.status,
                                'play_time': value.play_time
                            })
                        }
                        this.catalog = option;
                        this.loading=false;
                    }else {
                      this.catalog=[];
                      this.xianYin=true;
                    }
                }
            }).catch(error=>{
              console.log(error);
            })
          },
          /*提交建议*/
          referInfo(){
              let self = this;
              this.$axios({
                  url: this.$url.videoSuggest,
                  method:'post',
                  data:{
                    video_id:0,
                    suggest:this.suggest,
                  }
              }).then(response=> {
                  if (response.data.result) {
                    self.$notify({
                      title: '提示',
                      message: '提交成功，感谢您的宝贵意见',
                      type: 'success'
                    });
                  }else{
                    self.$notify.error({
                      title: '错误',
                      message: response.data.result.errorMsg
                    });
                  }
              }).catch(error=>{
                console.log(error);
              })
          },
          /*跳转页面顶部*/
          menu() {
            window.scrollTo(0,0);
            var H=document.body.clientHeight ;
            document.getElementById("loading-wrap").style.height=(H-50)+'px';
          },
          /*跳转视频*/
          skipHref(id,url){
            let self = this;
            this.$axios({
              url: this.$url.videoId,
              method:'post',
              data:{
                id:id,
              },
            }).then(response=>{
              if(response.data.result){
                  this.$router.push({path:'/video',name:'video',query:{id:id,url:url}})
              }else{
                self.$notify.error({
                  title: '错误',
                  message: response.data.result.errorMsg
                });
              }
            }).catch(error=>{
              console.log(error);
            })
          },
          /*判断flag方法*/
          getFlag(flag){
            if(flag==0){
              return true;
            }else if(flag==1){
              return false;
            }
          }
      },
  }
</script>
<style scoped>
  #loading-wrap{
    width:100%;
  }
  /*头部*/
  .header-area{
    width:100%;
    height:330px;
    overflow: hidden;
    background:#fff;
  }
  .header-top{
    width:100%;
    height:50px;
    background:#33383b;
  }
  .header-center{
    width:80%;
    margin:15px auto 0;
  }
  .head-main{
    width:99%;
    height:auto;
    margin:0 0.5%;
    border:1px solid #ccc;
    display:inline-block;
  }
  .head-main .head-img{
    width:500px;
    height:200px;
    padding:20px;
    float:left;
  }
  .head-main .head-img img{
    width:100%;
    height:100%;
  }
  .head-main .head-txt{
    width:auto;
    height:200px;
    padding:20px;
    margin-left:50px;
    float:left;
  }
  .head-title{
    font-size:20px;
    height:45px;
    margin:0;
    color:#383838;
  }
  .head-peo{
    font-size:13px;
    height:45px;
    margin:0;
    color:#383838;
  }
  /*列表*/
  .head-pro{
    width:80%;
    height:auto;
    margin:0 auto;
    background:#fff;
    overflow: hidden;
  }
  .head-list{
    width:70%;
    height:auto;
    float:left;
    margin-left:0.5%;
    border:1px solid #ccc;
  }
  .lis-tit{
    width:100%;
    height:40px;
    margin:0;
    text-indent:3%;
    line-height:40px;
    font-size:15px;
    border-bottom:1px solid #ccc;
  }
  .lis-ul{
    width:100%;
    height:auto;
    padding:0;
  }
  .lis-li{
    width:94%;
    padding:0 3%;
    height:40px;
    line-height:40px;
    position: relative;
    list-style:none;
    cursor:pointer;
  }
  .lis-lis{
    width:94%;
    padding:0 3%;
    height:40px;
    line-height:40px;
    position: relative;
    list-style:none;
    text-align:center;
  }
  .lis-li:hover{
    background: rgba(242,13,13,.05);
  }
  .lis-li .J-media-item{
    color: #1c1f21;
    display: block;
    overflow: hidden;
    word-break: break-all;
    text-decoration:none;
  }
  .lis-li .J-media-item .start{
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -19px;
    font-size: 22px;
    color: #383838;

  }
  .lis-li .J-media-item .ing,.lis-li .J-media-item .end{
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -19px;
    font-size: 22px;
    color: #00b43c;
  }
  .lis-li .J-media-item .type{
    font-size: 24px;
    color: #383838;
    line-height: 24px;
    position: relative;
    top: 3px;
    margin-right: 4px;
  }
  /*课程建议*/
  .head-ideas{
    width:25%;
    height:auto;
    float:right;
    margin-right:0.5%;
    border:1px solid #ccc;
  }
  .lis-box{
    width:98%;
    height:auto;
    padding:1%;
  }
  .tiJiao{float:right;margin:10px 0;}
</style>

